<template>
  <van-skeleton title avatar :row="3" :loading="loading" v-for="question in questionList">
    <van-card
        :desc="question.content"
    >
      <template #tags>
        <van-radio-group v-model="question.checked">
          <van-radio name="A">A:{{ question.optionA }}</van-radio>
          <van-radio name="B">B:{{ question.optionB }}</van-radio>
          <van-radio name="C">C:{{ question.optionC }}</van-radio>
          <van-radio name="D">D:{{ question.optionD }}</van-radio>
        </van-radio-group>
      </template>
      <template #footer>
        <van-row>
          题目难度：
          <van-rate v-model="question.degree" readonly/>
        </van-row>
        <van-button size="small" @click="doSubmit(question)">提交</van-button>
        <van-button size="small" @click="checkAnswer(question.answer)">查看答案</van-button>
        <van-button size="small" @click="checkAnalysis(question.analysis)">查看解析</van-button>
      </template>
    </van-card>
  </van-skeleton>
  <van-dialog v-model:show="showCheckAnalysis" title="查看解析" show-cancel-button>
    <van-field v-model="analysisIn" label="解析" readonly />
  </van-dialog>
  <van-dialog v-model:show="showCheckAnswer" title="查看答案" show-cancel-button>
    <van-field v-model="answerIn" label="答案" readonly />
  </van-dialog>
</template>

<script setup lang="ts">

import {QuestionType} from "../model/question";
import {ref} from "vue";
import myAxios from "../request/myAxios";
import {Toast} from "vant";

interface QuestionCardListProps {
  questionList: QuestionType[];
  loading: true;
}

const props = defineProps<QuestionCardListProps>()
const showCheckAnswer = ref(false);
const showCheckAnalysis = ref(false);
const answerIn = ref('');
const analysisIn = ref('');
const doSubmit = async (question:QuestionType) => {
  const res = await myAxios.post('/question/submitAns',question)
  if (res?.data.code === 0){
    Toast.success(res.data.data);
  }
}
const checkAnswer = (answer:string) => {
  showCheckAnswer.value = true;
  answerIn.value = answer;
}
const checkAnalysis = (analysis:string) =>{
  showCheckAnalysis.value = true;
  analysisIn.value = analysis;
}
</script>

<style scoped>

</style>
